<template>
	<div class="infinite-list-wrapper" style="overflow:auto;">
		<el-timeline infinite-scroll-disabled="disabled">
			<div v-if="messages.list.length > 0">
				<el-timeline-item v-for="(item, index) in messages.list" :key="index"
					:timestamp="moment(item.createTime).format('YYYY-MM-DD HH:MM:SS')" placement="top">
					<el-card class="el-card-m" style="height:120px">
						<!-- <h4>{{ item.username || "游客" }}：</h4> -->
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.content }}</p>
					</el-card>
				</el-timeline-item>
			</div>
			<div v-else>
				<el-timeline-item placement="top">
					<el-card class="el-card-m" style="height:120px">
						<h4>嘿嘿嘿：</h4>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
					</el-card>
				</el-timeline-item>
			</div>
		</el-timeline>
		<div class="write">
			<el-input type="textarea" :rows="5" placeholder="输入留言" maxlength="200" v-model="message"></el-input>
			<el-button type="info" round class="submit-message" @click="onOk">留言</el-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import moment from "moment"
import { ElNotification } from "element-plus";
import { getMessage } from "@/api/message";
import { add } from "@/api/db";

let message = ref("");

const messages: { list: Array<{ username: string, content: string, createTime: string, }> } = reactive({ list: [] });


const onOk = function () {
	if (!message.value) return ElNotification({ message: "写点啥提交也行呀😉", type: "warning" });
	add("message", { content: message.value, createTime: moment(Date.now()).format("YYYY-MM-DD HH:MM:SS") }).then((ret: any) => {
		if (!ret.status) return ElNotification({ message: ret.data, type: "error" })
		ElNotification({ message: "留言添加成功", type: "success" })
		messages.list.push({ username: "", content: message.value, createTime: moment(Date.now()).format("YYYY-MM-DD HH:MM:SS") })
	})
};
getMessage().then((ret: any) => {
	if (ret.status) messages.list = ret.data
})
</script>
<style lang="less">
.infinite-list-wrapper {
	width: 100%;
}

.submit-message {
	width: 100%;
	background: rgb(235, 245, 247);
	color: cadetblue;
	letter-spacing: 20px;
}

/*
屏幕小于768px的
*/
@media screen and (max-width: 768px) and (min-width: 100px) {
	.el-card-d {
		width: 100%;
		height: 100%;
	}
}
</style>
